"use client";
import { getShareLinkApi } from "@/api/config";
import { useRouter } from "@/i18n/routing";
import { useUserInfoStore } from "@/stores/useUserInfoStore";
import { copyText } from "@/utils/methods";
import { Toast } from "antd-mobile";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import React from "react";
import styles from "./page.module.scss";

const Item = ({ type = "shake" }) => {
    return (
        <div
            className={clsx(
                "min-w-fit mb-[.2rem] flex flex-shrink-0 flex-grow flex-row items-center",
                styles.itemWrap
            )}
        >
            <div
                className={clsx(
                    styles.item,
                    // styles.disabled,
                    styles.active,
                    "flex flex-col items-center text-[.12rem]"
                )}
            >
                <div className={clsx(styles.itemImg, "mb-[.05rem]")}></div>
                <div>Promoção</div>
                <div>
                    <span className="text-[#ffc000]">1</span> Pessoa
                </div>
                <div className={styles.itemMoney}>
                    <span>+3000</span>
                </div>
            </div>
            <div
                className={clsx(styles.arrow, "relative top-[-.2rem] flex flex-row justify-center")}
            >
                <img src="/fission/arrow.png" className={clsx("w-[.2rem]")} alt="" />
            </div>
        </div>
    );
};

const Page: React.FC = () => {
    const t = useTranslations();
    const router = useRouter();
    const { userInfo } = useUserInfoStore();
    const pathname = usePathname();
    const [BASE_URL, setBaseUrl] = React.useState("");

    const url = React.useMemo(() => {
        const shareUrl = `${BASE_URL}?share_id=${userInfo ? userInfo.referrer_code : "xxxxxx"}`;
        return encodeURIComponent(`${shareUrl}`);
    }, [BASE_URL, userInfo]);
    const SHARE_SOURCE = React.useMemo(() => {
        return [
            {
                icon: "/summary/Facebook.png",
                label: "Facebook",
                shareUrl: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
            },
            {
                icon: "/summary/WhatsApp.png",
                label: "WhatsApp",
                shareUrl: `https://api.whatsapp.com/send?text=${url}`,
            },
            {
                icon: "/summary/Telegram.png",
                label: "Telegram",
                shareUrl: `https://t.me/share/url?url=${url}`,
            },
            {
                icon: "/summary/Twitter.png",
                label: "Twitter",
                shareUrl: `https://twitter.com/intent/tweet?text=${url}`,
            },
            {
                icon: "/summary/Email.png",
                label: "Email",
                shareUrl: `mailto: ?&subject=&cc=&bcc=&body=${url}`,
            },
        ];
    }, [url]);

    React.useEffect(() => {
        init();
    }, []);
    const init = async () => {
        const res = await getShareLinkApi();
        if (res.code === 200) {
            const url =
                res.data.find((item) => item.type === 2)?.url ??
                window.location.href.replace(pathname, "");
            setBaseUrl(url);
        }
    };

    return (
        <div className={styles.fissionPage}>
            <div className={styles.container}>
                <img className={styles.img} src="/fission/title.png" alt="" />
                <div className={styles.content}>
                    <div
                        className={clsx(
                            "mb-[.09rem] flex flex-row items-center justify-between p-[.1rem]",
                            styles.box
                        )}
                    >
                        <div
                            className={clsx(
                                "mr-[.1rem] overflow-hidden text-ellipsis whitespace-nowrap"
                            )}
                        >
                            Meu link:{decodeURIComponent(url)}
                        </div>
                        <span
                            className={styles.copy}
                            onClick={() => {
                                copyText(decodeURIComponent(url));
                                Toast.show({
                                    icon: "success",
                                    content: t("SummaryPage.copySuc"),
                                    maskClickable: false,
                                });
                            }}
                        ></span>
                    </div>
                    <div className={clsx(styles.box, "mb-[.1rem] p-[.1rem]")}>
                        <div className={clsx("mb-[.1rem] text-[.14rem] font-bold")}>
                            Compartilhamento Rápido
                        </div>
                        <div className={clsx("flex flex-row items-center")}>
                            {SHARE_SOURCE.map((item) => {
                                return (
                                    <a
                                        href={item.shareUrl}
                                        target={"_blank"}
                                        className={clsx(
                                            "mr-[.1rem] w-[.4rem] overflow-hidden rounded-[50%]"
                                        )}
                                        key={item.label}
                                    >
                                        <img className={styles.icon} src={item.icon} alt="" />
                                    </a>
                                );
                            })}
                        </div>
                    </div>
                    <div
                        className={clsx(
                            styles.box,
                            "mb-[.2rem] flex flex-row items-center justify-between p-[.1rem]"
                        )}
                    >
                        <div>
                            <div>Meus subordinados diretos</div>
                            <div>
                                <span className="text-[#ffae00]">0Pessoa </span>
                                (Válido <span className="text-[#ffae00]">0Pessoa</span>)
                            </div>
                        </div>
                        <div
                            className={clsx("text-[#2dd0df]")}
                            onClick={() => router.push("/fission/detail")}
                        >
                            Detalhes&gt;
                        </div>
                    </div>

                    <div className={clsx("mb-[.1rem] flex flex-row flex-wrap justify-start")}>
                        <Item></Item>
                        <Item></Item>
                        <Item type={"shake"}></Item>
                        <Item></Item>
                        <Item></Item>
                        <Item></Item>
                        <Item></Item>
                        <Item></Item>
                        <Item></Item>
                    </div>

                    <div className={clsx(styles.box, "p-[.1rem]")}>
                        <div>
                            0 que é o número de promoção efetiva?(Preenchendo as seguintes
                            condições)
                        </div>
                        <div className={styles.hr}></div>
                        <div className="flex flex-row items-center justify-between">
                            <div>Primeiro depósito do subordinado</div>
                            <div className="text-[#2dd0df]">≥0,00</div>
                        </div>
                        <div className={styles.hr}></div>
                        <div className="flex flex-row items-center justify-between">
                            <div>Depositos acumulados do subordinado</div>
                            <div className="text-[#2dd0df]">≥0,00</div>
                        </div>
                        <div className={styles.hr}></div>
                        <div className="flex flex-row items-center justify-between">
                            <div>quantidade de apostas acumuladas pelo subordinado</div>
                            <div className="text-[#2dd0df]">≥0,00</div>
                        </div>
                        <div className={styles.hr}></div>
                        <div className="flex flex-row items-center justify-between">
                            <div>Dias acumulados de depósito do subordinado</div>
                            <div className="text-[#2dd0df]">≥0,00</div>
                        </div>
                        <div className={styles.hr}></div>
                        <div className="flex flex-row items-center justify-between">
                            <div>Número acumulado de recargas dos subordinados</div>
                            <div className="text-[#2dd0df]">≥0,00</div>
                        </div>
                    </div>
                    <div
                        className={clsx(
                            styles.box,
                            "relative mt-[.4rem] p-[.15rem] pl-[.3rem] pt-[.4rem]"
                        )}
                    >
                        <div className={styles.ttitle}>Detalhes do Evento</div>
                        <ul className="list-decimal">
                            <li>
                                Convide amigos para receber um bônus. Ao completar diferentes
                                números de convites, você pode ganhar o bônus correspondente, com um
                                valor máximo de 88.888. Quanto mais amigos você convidar, maiores
                                serão as recompensas; As apostas feitas pelos subordinados são
                                consideradas válidas apenas nas seguintes plataformas；Todas as
                                Plataformas;
                            </li>
                            <li>
                                Esta atividade é um presente adicional da plataforma.Você também
                                pode desfrutar de outras recompensas e comissões de agentes, o que
                                significa que você pode aproveitar a a chance de ganhar bônus varias
                                vezes;
                            </li>
                            <li>
                                As recompensas só podem ser reivindicadas manualmente no iOS,
                                Android e H5, e serão distribuídas automaticamente se expiradas;
                            </li>
                            <li>
                                O bônus (excluindo o principal) concedido por esta atividade requer
                                1 vez o valor em apostas valida para serem retiradas;
                            </li>
                            <li>
                                Esta atividade está limitada ao titular da conta para operações
                                humanas normais. Alugar, usar cheats, robôs, jogar com contas
                                diferentes,jogar com varias pessoas, arbitragem, interfaces,
                                acordos, explorar vulnerabilidades, controle de grupo ou outros
                                meios técnicos são proibidos.Caso contrário, as recompensas podem
                                ser canceladas ou deduzidas, congeladas ou até mesmo colocadas em
                                uma lista;
                            </li>
                            <li>
                                Para evitar mal-entendidos de interpretação de texto, a plataforma
                                reserva o direito de interpretação e descisão final para à
                                plataforma.
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Page;